<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>
<h1>欢迎来到问卷大厅</h1>
<div id="app">

    <!--搜索表单-->
    <el-form :inline="true" :model="survey" class="demo-form-inline">

        <el-form-item label="当前状态">
            <el-select v-model="survey.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="问卷名称">
            <el-input v-model="survey.surveyName" placeholder="问卷名称"></el-input>
        </el-form-item>

        <el-form-item label="问卷描述">
            <el-input v-model="survey.surveyDescription" placeholder="问卷描述"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>

    </el-form>


    <!--按钮-->



    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>

            <el-table-column
                    prop="id"
                    label="问卷id"
                    align="center"
                    id="aid"
            >
            </el-table-column>


            <el-table-column
                    prop="surveyName"
                    label="问卷名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="surveyDescription"
                    label="问卷描述"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="startTime"
                    align="center"
                    label="问卷开放时间">
            </el-table-column>
            <el-table-column
                    prop="endTime"
                    align="center"
                    label="问卷关闭时间">
            </el-table-column>
            <el-table-column
                    prop="statusStr"
                    align="center"
                    label="当前状态">
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作">
                <template slot-scope="scope">

                    <el-row>
                        <el-button type="primary" plain @click="selectquestion">填写问卷</el-button>
                    </el-row>
                </template>
            </el-table-column>

        </el-table>
    </template>

    <el-dialog
            title="编辑问卷"
            :visible.sync="dialogVisible"
            width="30%"
    >

        <div v-for="(item, index) in questionData">
            <input v-if="item.type === 'input'" v-model='item.val'>
            <radio v-if="item.type === 'radio'" @click='item.process'></radio>
            <checkbox v-if="item.type === 'checkbox'" @click='item.process'></checkbox>
            ...
        </div>
        <el-form-item>
            <el-button type="primary" @click="addBrand">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>

    </el-dialog>


    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
    </el-pagination>



</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#app",

        mounted(){
            //当页面加载完成后，发送异步请求，获取数据
            //this.userId = this.getid("creatorId");

            this.selectAll();
            //this.survey.creatorId = this.userId;

            /* var _this = this;

             axios({
                 method:"get",
                 url:"http://localhost:8080/brand-case/selectAllServlet"
             }).then(function (resp) {
                 _this.tableData = resp.data;
             })*/

        },

        methods: {

            //时间转换
            timestampToTime(timestamp) {
                var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                Y = date.getFullYear() + '-';
                M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                D = date.getDate() + ' ';
                h = date.getHours() + ':';
                m = date.getMinutes() + ':';
                s = date.getSeconds();
                return Y+M+D+h+m+s;

            },

            //获取url参数的方法
            getid(strParame) {
                var args = new Object( );
                var query = location.search.substring(1);

                var pairs = query.split("&"); // Break at ampersand
                for(var i = 0; i < pairs.length; i++) {
                    var pos = pairs[i].indexOf('=');
                    if (pos == -1) continue;
                    var argname = pairs[i].substring(0,pos);
                    var value = pairs[i].substring(pos+1);
                    value = decodeURIComponent(value);
                    args[argname] = value;
                }
                return args[strParame];
            },

            // 查询分页数据
            selectAll(){


                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-case/survey/selectBystatus?currentPage="+this.currentPage+"&pageSize="+this.pageSize+"&creatorId="+this.userId,
                    data:this.survey
                }).then(resp =>{
                    //设置表格数据
                    for( var i = 0; i < resp.data.rows.length; i++ ){
                        resp.data.rows[i].startTime = this.timestampToTime(resp.data.rows[i].startTime);
                        resp.data.rows[i].endTime = this.timestampToTime(resp.data.rows[i].endTime);
                    };
                    this.tableData = resp.data.rows; // {rows:[],totalCount:100}
                    //设置总记录数
                    this.totalCount = resp.data.totalCount;
                })

            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;

                // console.log(this.multipleSelection)
            },
            // 查询方法
            onSubmit() {
                //console.log(this.brand);
                this.selectAll();

            },


            //分页
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                // 重新设置每页显示的条数
                this.pageSize  = val;
                this.selectAll();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                // 重新设置当前页码
                this.currentPage  = val;
                this.selectAll();
            },
            selectOption(row){
                this.questionId = row.id;
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-case/question/selectOption?questionId="+row.id,
                    data:this.surveyId
                }).then(resp =>{
                    //设置表格数据
                    this.optionData = resp.data;
                    this.dialog2 = true;

                })
            },
            selectquestion(){
                this.dialogVisible=true;
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-case/question/selectAll",
                    data:this.surveyId
                }).then(resp =>{
                    //设置表格数据
                    this.questionData = resp.data;

                })
            },



        },
        data() {
            return {
                //关联的用户的id
                userId:0,
                // 每页显示的条数
                pageSize:5,
                // 总记录数
                totalCount:100,
                // 当前页码
                currentPage: 1,
                // 添加数据对话框是否展示的标记
                dialogVisible: false,
                //问卷id
                sid:1,

                // 品牌模型数据
                survey: {
                    id:'',
                    surveyName:"",
                    surveyDescription:"",
                    startTime:"",
                    endTime:"",
                    statusStr:'',
                    surveySort:'',
                    topFlag:'',
                    creatorId:'',

                },
                //删除的id

                // 被选中的id数组
                selectedIds:[],
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据
                questionData: [{
                    id: '',
                    surveyId: '',
                    questionType: '',
                    questionName: '',
                    questionDescription: '',
                    questionSort: '',
                    requiredFlag: '',
                }, {
                    id: '',
                    surveyId: '',
                    questionType: '',
                    questionName: '',
                    questionDescription: '',
                    questionSort: '',
                    requiredFlag: '',
                }, {
                    id: '',
                    surveyId: '',
                    questionType: '',
                    questionName: '',
                    questionDescription: '',
                    questionSort: '',
                    requiredFlag: '',
                }, {
                    id: '',
                    surveyId: '',
                    questionType: '',
                    questionName: '',
                    questionDescription: '',
                    questionSort: '',
                    requiredFlag: '',
                }],

                tableData: [
                    {
                        id:"1",
                        surveyName:"问卷",
                        surveyDescription:"描述",
                        startTime:"2016-10-22 18:11:20",
                        endTime:"2017-12-10 15:21：10",
                        statusStr:'1',
                        surveySort:'2',
                        topFlag:'1'
                    },{
                        id:"1",
                        surveyName:"问卷",
                        surveyDescription:"描述",
                        startTime:"2016-10-22 18:11:20",
                        endTime:"2017-12-10 15:21：10",
                        statusStr:'1',
                        surveySort:'3',
                        topFlag:'0'
                    },{
                        id:"1",
                        surveyName:"问卷",
                        surveyDescription:"描述",
                        startTime:"2016-10-22 18:11:20",
                        endTime:"2017-12-10 15:21：10",
                        statusStr:'1',
                        surveySort:'4',
                        topFlag:'0'
                    }
                ]
            }
        }
    })

</script>

</body>
</html>